<script lang="ts" setup>
import { computed, inject } from "vue";

interface FormItemProps {
  label?: string;
  required?: boolean;
}

withDefaults(defineProps<FormItemProps>(), {
  required: false,
});

const direction = inject<"horizontal" | "vertical">("direction", "horizontal");

const styles = computed<any>(() => {
  const newStyles: any = {
    flexDirection: direction === "vertical" ? "column" : "row",
  };
  if (direction === "horizontal") {
    newStyles.alignItems = "start";
  }
  return newStyles;
});
</script>

<template>
  <div class="umi-form-item" :style="styles">
    <div class="label">
      <div class="star" v-if="required">*</div>
      <div>{{ label }}</div>
    </div>
    <div class="value">
      <slot></slot>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.umi-form-item {
  display: flex;
  gap: 16px;

  .label {
    color: #333;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 6px;
    line-height: 32px;
  }

  .star {
    color: red;
  }

  .value {
    flex: 1;
  }
}
</style>
